<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :before-upload="handleBeforeUpload"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      name="file"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="upload"
      v-if="this.type == 'url'"
    >
    </el-upload>
    <el-dialog
          width="650px"
          id="videoUpload"
          title="视频上传"
          :visible.sync="videoUploadTag"
          append-to-body
          :close-on-click-modal="false"
        >
          <el-form ref="videoObj" :model="videoObj" label-width="80px">
            <el-form-item label="视频链接">
                <file-upload v-model="videoObj.videoLink"/>
              <el-input
                v-model="videoObj.videoLink"
                placeholder="请输入视频链接"
                clearable
              ></el-input>
            </el-form-item>
            <el-row>

            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addVideoLink()">添加</el-button>
          </div>
        </el-dialog>
    <div class="editor editor1" ref="editor" :style="styles"></div>
  </div>
</template>

<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import axios from 'axios'
import "quill/dist/quill.bubble.css";
import { getToken } from "@/utils/auth";
import { Video } from './video';
 var src=''
// 定义颜色选择器模块
const ColorPicker = Quill.import('formats/color');
// 定义 Quill 链接模块
const Link = Quill.import('formats/link');
// 扩展 Quill 链接模块以添加 target="_blank" 属性
class MyLink extends Link {
  static create(value) {
    const node = super.create(value);
    // 将链接设置为在新标签页中打开
    node.setAttribute('target', '_blank');
    return node;
  }
  static createTooltip(inputElem) {
      // 自定义弹出框的创建逻辑
      // 这里可以添加你自己的样式和位置控制
      inputElem.style.position = 'absolute';
      inputElem.style.top = '50px'; // 自定义弹出框距离顶部的位置
      inputElem.style.left = '50px'; // 自定义弹出框距离左侧的位置
      return inputElem;
    }
}
const BlockEmbed = Quill.import('blots/block/embed');
class IframeBlot extends BlockEmbed {
  static create(value) {
    let node = super.create();
    node.setAttribute('src', value);
    node.setAttribute('frameborder', '0');
    node.style.width='100%'
     node.style.height='500px'
    node.setAttribute('allowfullscreen', true);
    node.setAttribute('class', 'ql-video');
    return node;
  }

  static value(node) {
    return node.getAttribute('src');
  }
}

IframeBlot.blotName = 'iframe';
IframeBlot.tagName = 'iframe';

Quill.register(IframeBlot);
class YoutubeBlot extends BlockEmbed {
  static create(url) {
    const node = super.create();
   node.setAttribute('src', url);
   src=url
   node.setAttribute('frameborder', '0');
   node.style.width='100%'
    node.style.height='500px'
   node.setAttribute('allowfullscreen', true);
    return node;
  }
}

YoutubeBlot.blotName = 'youtube';
YoutubeBlot.tagName = 'iframe';
Quill.register(YoutubeBlot, true);
Quill.register({ 'formats/video': Video }, true);
// 注册自定义链接格式
Quill.register(MyLink, true);
let Parchment = Quill.import('parchment');

let lineHeightStyle = new Parchment.Attributor.Style('lineheight', 'line-height', {
    scope: Parchment.Scope.BLOCK,
    whitelist: ['10px', '20px', '30px', '32px', '34px' ,'36px','38px']  // 定义你希望支持的行高值
});

Quill.register(lineHeightStyle, true);
// 定义颜色列表，包括全色选项
Quill.register('modules/colorPicker', function(quill, options) {
      const colorPicker = document.createElement('input');
      colorPicker.type = 'color';
      colorPicker.value = '#000000'; // 设置默认颜色
      colorPicker.style.width = '60px'; // 设置颜色选择器宽度
      colorPicker.oninput = () => {
        quill.format('color', colorPicker.value);
      };
      const toolbar = quill.getModule('toolbar').container;
      toolbar.appendChild(colorPicker);
});

Quill.register('modules/backgroundPicker', function(quill, options) {
    const range = quill.getSelection();
      const backgroundPicker = document.createElement('input');
      backgroundPicker.type = 'color';
      backgroundPicker.value = 'transparent'; // 设置默认背景色为透明
      backgroundPicker.style.width = '60px'; // 设置颜色选择器宽度
       backgroundPicker.style.marginLeft = '8px'; // 设置颜色选择器宽度
      backgroundPicker.oninput = () => {
        quill.format('background', backgroundPicker.value);
      };
      const toolbar = quill.getModule('toolbar').container;
      toolbar.appendChild(backgroundPicker);
});
// 自定义字体大小
// const Size = Quill.import('attributors/style/size')
// Size.whitelist = [false, '12rem', '14rem', '16rem', '18rem', '20rem', '32rem']
// Quill.register(Size, true)
export default {
  name: "Editor",
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: null,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    },
    /* 上传文件大小限制(MB) */
    fileSize: {
      type: Number,
      default: 5,
    },
    /* 类型（base64格式、url格式） */
    type: {
      type: String,
      default: "url",
    }
  },
  data() {
     var than = this;
    return {
      colors:[],
       videoUploadTag: false,
            //弹框插入的视频链接记录
            videoObj: {
              videoLink: "",
            },
      pollInterval:null,
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
      Quill: null,
      currentValue: "",
      options: {
        theme: "snow",
        bounds: document.body,
        autoFocus: false,
        debug: "warn",
        modules: {
          colorPicker: {},
           backgroundPicker: {},
          // imageResize: {
          //     // See optional "config" below
          // },
          // 工具栏配置
          toolbar: {
            container:[
               [{ 'lineheight': ['10px', '20px', '30px', '32px', '34px' ,'36px','38px'] }],
            ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
            // ["blockquote", "code-block"],                    // 引用  代码块
            [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
            [{ indent: "-1" }, { indent: "+1" }],            // 缩进
                [{ size: ["small", false, "large", "huge"] }],   // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
           [{ color:['#1ababd','#FFAF00']  }],             // 字体颜色、字体背景颜色
            [{ align: [] }],                                 // 对齐方式
            ["clean"],                                       // 清除文本格式
            ["link", "image","video"],                       // 链接、图片、视频
             // ['']
          ],
           handlers: {
                        video: value => {
                          // 点击视频图标，弹出窗
                          than.videoObj = {
                            videoLink: "",
                          };
                          than.videoUploadTag = true;
                        }
                      }
          }
        },
        placeholder: "请输入内容",
        readOnly: this.readOnly,
      },
    };
  },
  computed: {
    styles() {
      let style = {};
      if (this.minHeight) {
        style.minHeight = `${this.minHeight}px`;
      }
      if (this.height) {
        style.height = `${this.height}px`;
      }
      return style;
    },
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? "" : val;
          if (this.Quill) {

            var tempDiv = document.createElement('div');
              tempDiv.innerHTML = this.currentValue;

              // 处理临时div中的iframe元素
              var iframes = tempDiv.querySelectorAll('iframe');
              if (iframes.length > 0) {
                for (var i = 0; i < iframes.length; i++) {
                  // 获取iframe的src属性

                  src = iframes[i].getAttribute('src');
                    localStorage.setItem('src',src)
                  // 将src属性设置为data-src，以防止被改变
                  iframes[i].setAttribute('data-src', src);
                }
              }
            this.Quill.pasteHTML(tempDiv.innerHTML);
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
    document.oncontextmenu = function() {
        return false;
    }
    this.init();
    this.colors=  ['#1ababd','#FFAF00']
    if(localStorage.getItem('color')){
      JSON.parse(localStorage.getItem('color')).forEach(val=>{
        this.colors.push(val)
      })
    }
    this.updateColorButton(this.colors)
    this.pollInterval = setInterval(()=>{
      this.setColor()
    }, 2000);
   this.$nextTick(()=>{
    // 获取需要设置滚动条的容器元素
     const container = document.getElementsByClassName('el-form')[1];
     // 将滚动条定位到容器的顶部
     container.scrollTop = 0;
   })
  },
  beforeDestroy() {
    this.Quill = null;
  },
  methods: {
     addVideoLink() {
          if (this.videoObj.videoLink.length == 0) {
            return this.$message.error("请输入视频链接");
          }
          //视频插入在富文本中的位置
          // 当编辑器中没有输入文本时，这里获取到的 newRange 为 null
          let newRange = this.Quill.selection.savedRange;
          let index = 0;
          if (newRange == null) {
            index = 0;
          } else {
            index = newRange.index;
          }
          if(this.videoObj.videoLink.indexOf('https://www.youtube.com')==0){
          localStorage.setItem('src',this.videoObj.videoLink)
            this.Quill.insertEmbed(index, "youtube",this.videoObj.videoLink);
              this.videoUploadTag = false;
            return false
          }
          this.Quill.insertEmbed(index, "video",this.videoObj.videoLink);
          //隐藏弹框
          this.videoUploadTag = false;
          this.Quill.setSelection(1 + index);
        },
    setColor(){
        if(localStorage.getItem('color')){
          this.colors= ['#1ababd','#FFAF00']
          JSON.parse(localStorage.getItem('color')).forEach(val=>{
            this.colors.push(val)
          })
           this.updateColorButton(this.colors)
        }

    },
    // 检查要更新的内容与当前编辑器的内容是否相等
     isContentEqual(delta1, delta2) {
        return delta1.ops.length === delta2.ops.length && JSON.stringify(delta1.ops) === JSON.stringify(delta2.ops);
    },
updateColorButton(colors) {
   // const toolbar = this.Quill.getModule('toolbar');
   //    const colorButton = toolbar.container.querySelector('.ql-color .ql-picker-options');
   //    colorButton.classList.add("zidingyi");
   //       // 清空颜色下拉框中的选项
   //       colorButton.innerHTML = '';

   //       // 添加颜色选项
   //       colors.forEach(color => {
   //           const option = document.createElement('option');
   //           option.value = color;
   //           option.style.backgroundColor = color;
   //            option.addEventListener('click', ()=> {
   //                       const index = colors.indexOf(color);
   //                       if (index !== -1) {
   //                           this.Quill.format('color', color);
   //                       }
   //                   });
   //                   let timer = null;
   //                   let doubleClickTimeout = 500; // 500毫秒内连续两次右键点击视为双击

   //                   option.addEventListener('contextmenu', (e)=> {
   //                       if (e.button === 2) { // 检查是否是右键点击
   //                           if (timer) {
   //                               clearTimeout(timer);
   //                               localStorage.setItem('color',JSON.stringify(JSON.parse(localStorage.getItem('color')).filter(item => item !== color)))
   //                               this.setColor()
   //                           } else {
   //                               timer = setTimeout(function() {
   //                                   timer = null;
   //                               }, doubleClickTimeout);
   //                           }
   //                       }
   //                   });
   //           colorButton.appendChild(option);
   //       });
},
    // 更新内容之前先检查内容是否相等
     updateQuillContent(quill, newContent) {
        const currentContent = quill.getContents();
        if (!this.isContentEqual(currentContent, newContent)) {
           quill.setContents({ ops: [] })
            quill.updateContents(newContent, 'user');
        }
    },
    showCustomLinkDialog(){
      this.$prompt('请输入url', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(({ value }) => {
              if (!isNaN(value)) {

                const range = this.Quill.getSelection();
                  if (value && range) {
                    this.Quill.format('link', value);
                  }
              }
            })
    },
    deleteTime(){
      clearInterval(this.pollInterval);
    },
    init() {
             const editor = this.$refs.editor;
             this.Quill = new Quill(editor, this.options);
      setTimeout(()=>{


             console.log(this.Quill)
             // document.getElementById('ql-picker-options-0').querySelectorAll(".ql-picker-item").forEach(val=>{
             //  val.innerHTML=val.dataset.value
             // })
             // document.querySelector('.ql-link').addEventListener('click', (event)=> {
             //   event.preventDefault();
             //   this.showCustomLinkDialog();
             // });
              // 自定义上传视频的处理程序
             this.$nextTick(()=>{
               setTimeout(()=>{

                   // 获取编辑器中的所有图片
                   var container = document.querySelector('.ql-editor');
                     var images = container.querySelectorAll('img');

                     if(container.querySelectorAll('iframe')[0]){
                       console.log(container.querySelectorAll('iframe'))
                     container.querySelectorAll('iframe')[0].src=localStorage.getItem('src')
                     }
                     // 遍历所有图片并添加点击事件监听器
                     images.forEach((image)=> {
                       image.addEventListener('dblclick', ()=> {

                           // 在这里处理图片的点击事件
                             this.$prompt('请输入图片宽度', '提示', {
                                     confirmButtonText: '确定',
                                     cancelButtonText: '取消',
                                     inputPattern:/(^[0-9]([0-9]+)?(.[0-9]{1,9})?$)|(^(0){1}$)|(^[0-9].[0-9]([0-9])?$)/,
                                     inputErrorMessage: '宽度格式不正确'
                                   }).then(({ value }) => {
                                     if (!isNaN(value)) {

                                               const naturalWidth = image.naturalWidth;
                                               const naturalHeight = image.naturalHeight;
                                               const ratio = naturalWidth / naturalHeight;
                                               let con=this.Quill.getContents()
                                               image.style.width = value + 'px';
                                               image.style.height = Math.round(value / ratio) + 'px'; // 等比缩放高度
                                               con.ops.forEach(item=>{
                                                 if(item.insert.image){
                                                   if(item.insert.image==decodeURIComponent(image.src)){
                                                     item['attributes']={ width: value + 'px', height: Math.round(value / ratio) + 'px' }
                                                   }
                                                 }
                                               })
                                               // this.Quill.setContents({ ops: [] })
                                               // console.log(con)
                                               this.updateQuillContent(this.Quill,con);
                                               }
                                   })

                       });
                     });

               },1000)
             })
             // 如果设置了上传地址则自定义图片上传事件
             if (this.type == 'url') {
               let toolbar = this.Quill.getModule("toolbar");
               toolbar.addHandler("image", (value) => {

                 if (value) {
                   this.$refs.upload.$children[0].$refs.input.click();
                 } else {
                   this.quill.format("image", false);
                 }
               });
             }

           this.Quill.root.addEventListener('paste', (event) => {
            // 阻止默认粘贴行为，这样Quill不会立即处理粘贴的内容
         event.preventDefault();

         // 获取剪贴板数据
         const clipboardData = event.clipboardData || window.clipboardData;
         if (!clipboardData) {
           return;
         }
        var text = clipboardData.getData('text/plain');
         var images = clipboardData.files;
         // 获取剪贴板上的图片
         //const items = clipboardData.items;
         let quill = this.Quill;
         // 获取光标所在位置
         setTimeout(()=>{
           quill.insertText(quill.getSelection().index, text);
            quill.setSelection(quill.getSelection().index + text.length);
           for (let i = 0; i < images.length; i++) {
              let formData= new FormData()
                 formData.append('file', images[i]);
                 axios({
             method: 'post',
             url: this.uploadUrl, // 你的上传 URL
             headers:this.headers,
             data: formData,
           })
                   .then((response) => {
                     quill.insertEmbed(quill.getSelection().index, "image", '' + response.data.url);
                     // 调整光标到最后
                     quill.setSelection(quill.getSelection().index + 1);
                   })
                   .catch((error) => {
                   });

                // break; // 假设我们只处理第一个图片
                   }
         },100)

           });
           var tempDiv = document.createElement('div');
             tempDiv.innerHTML = this.currentValue;

             // 处理临时div中的iframe元素
             var iframes = tempDiv.querySelectorAll('iframe');
             if (iframes.length > 0) {
               for (var i = 0; i < iframes.length; i++) {
                 // 获取iframe的src属性

                  src = iframes[i].getAttribute('src');
                  localStorage.setItem('src',src)
                 // 将src属性设置为data-src，以防止被改变
                 iframes[i].setAttribute('data-src', src);
               }
             }
             this.Quill.pasteHTML(tempDiv.innerHTML);
             console.log(this.Quill.getText())
             console.log(this.currentValue)
             this.Quill.on("text-change", (delta, oldDelta, source) => {
               setTimeout(()=>{
                if(this.$refs.editor.querySelectorAll('iframe')[0]){
                  console.log( this.$refs.editor.querySelectorAll('iframe'))
                  this.$refs.editor.querySelectorAll('iframe')[0].src=localStorage.getItem('src')
                }
                   const html = this.$refs.editor.children[0].innerHTML;
                   const text = this.Quill.getText();
                   const quill = this.Quill;
                   this.currentValue = html;
                   this.$emit("input", html);
                   this.$emit("on-change", { html, text, quill });
                     delta.ops.forEach(op => {

                       if (op.insert && op.insert.image) {
                         // 找到新插入的图片元素
                         const imgElement = document.querySelector(`img[src="${op.insert.image}"]`);
                         if (imgElement) {
                          // imgElement.parentElement.style.textAlign='center'
                           // 为图片元素绑定点击事件
                           imgElement.addEventListener('dblclick', ()=> {
                             // 在这里处理图片的点击事件
                               this.$prompt('请输入图片宽度', '提示', {
                                       confirmButtonText: '确定',
                                       cancelButtonText: '取消',
                                       inputPattern:/(^[0-9]([0-9]+)?(.[0-9]{1,9})?$)|(^(0){1}$)|(^[0-9].[0-9]([0-9])?$)/,
                                       inputErrorMessage: '宽度格式不正确'
                                     }).then(({ value }) => {
                                       if (!isNaN(value)) {
                                                 const naturalWidth = imgElement.naturalWidth;
                                                 const naturalHeight = imgElement.naturalHeight;
                                                 const ratio = naturalWidth / naturalHeight;

                                                 imgElement.style.width = value + 'px';
                                                 imgElement.style.height = Math.round(value / ratio) + 'px'; // 等比缩放高度
                                                   let con=this.Quill.getContents()
                                                con.ops.forEach(item=>{
                                                  if(item.insert.image){
                                                    if(item.insert.image==decodeURIComponent(imgElement.src)){

                                                      item['attributes']={ width: value + 'px', height: Math.round(value / ratio) + 'px' }
                                                    }
                                                  }
                                                })
                                                // this.Quill.setContents({ ops: [] })
                                                // console.log(con)
                                                this.updateQuillContent(this.Quill,con);
                                                 }
                                     })
                           });
                         }
                       }
                     });
                     this.$emit("on-text-change", delta, oldDelta, source);


               },1000)
             });
             this.Quill.on("selection-change", (range, oldRange, source) => {
               this.$emit("on-selection-change", range, oldRange, source);
             });
             this.Quill.on("editor-change", (eventName, ...args) => {

               this.$emit("on-editor-change", eventName, ...args);
             });
             setTimeout(()=>{
               this.$nextTick(()=>{
                // 获取需要设置滚动条的容器元素
                 const container = document.getElementsByClassName('el-form')[1];
                 // 将滚动条定位到容器的顶部
                 container.scrollTop = 0;
               })
             },1000)

      },1)
    },
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
      const isJPG = type.includes(file.type);
      // 检验文件格式
      if (!isJPG) {
        this.$message.error(`图片格式错误!`);
        return false;
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleUploadSuccess(res, file) {
      // 如果上传成功
      if (res.code == 200) {
        // 获取富文本组件实例
        let quill = this.Quill;
        // 获取光标所在位置
        let length = quill.getSelection().index;

        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", '' + res.url);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
    },
    handleUploadError() {
      this.$message.error("图片插入失败");
    },
  },
};
</script>

<style>
.editor, .ql-toolbar {
  white-space: pre-wrap !important;
  line-height: normal !important;
}
.ql-lineheight{
  width: 70px;
}
.ql-editor .ql-lineheight-10 { line-height: 10px; }
.ql-editor .ql-lineheight-20 { line-height: 20px; }
.ql-editor .ql-lineheight-30 { line-height: 30px; }
.ql-editor .ql-lineheight-32 { line-height: 32px; }
.ql-editor .ql-lineheight-34 { line-height: 34px; }
.ql-editor .ql-lineheight-36 { line-height: 36px; }
.ql-editor .ql-lineheight-38 { line-height: 38px; }
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="10px"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="20px"]::before {
  content: "20px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="30px"]::before {
  content: "30px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="32px"]::before {
  content: "32px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="34px"]::before {
  content: "34px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="36px"]::before {
  content: "36px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value="38px"]::before {
  content: "38px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-options .ql-picker-item[data-value="10px"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-options .ql-picker-item[data-value="20px"]::before {
  content: "20px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-options .ql-picker-item[data-value="30px"]::before {
  content: "30px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-options .ql-picker-item[data-value="32px"]::before {
  content: "32px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-options .ql-picker-item[data-value="34px"]::before {
  content: "34px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-options .ql-picker-item[data-value="36px"]::before {
  content: "36px";
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-options .ql-picker-item[data-value="38px"]::before {
  content: "38px";
}
.quill-img {
  display: none;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before{
    content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before  {
    content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before{
    content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: '32px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
    content: '24px';
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "H1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "H2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "H3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "H4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "H5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "H6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
.zidingyi::after {
  content: "右键双击即可删除"; /* 这里是你想要显示的文本内容 */
  display: none; /* 初始状态下隐藏 */
}
.ql-toolbar.ql-snow .ql-formats {
    margin-right: 8px;
}
.zidingyi:hover::after {
  display: block; /* 鼠标悬停时显示 */
}

</style>
